<template>
  <!-- 列表 -->
  <div
    class="flex module-show-list"
    v-if="list.length > 0"
    animation="lightSpeedIn"
  >
    <div
      class="module-show-item hand flex"
      @click.stop="jumpDetail(item)"
      v-for="(item, index) in list"
      :key="index + Date.now()"
    >
      <!-- 图片 -->
      <div class="image-lar">
        <!-- <img :src="item.full_cover_url" alt=""> -->
        <el-image :src="item.full_cover_url" class="full-bg">
          <div slot="placeholder" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
          <div slot="error" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
        </el-image>
      </div>
      <div class="infomain-right">
        <!-- 标题 -->
        <div class="flex title">
          <div class="pano-name" v-if="item.title">
            <!-- <el-tooltip effect="dark" :content="item.title" placement="bottom-start"> -->
            <p class="omit">
              {{ item.title }}
            </p>
            <!-- </el-tooltip> -->
          </div>
          <div class="fs-n">{{ item.created.slice(0, 10) }}</div>
        </div>
        <!-- 副标题 -->
        <div class="summary fc-b1 pdx2">{{ item.summary }}</div>
        <div class="num-date flex pdx2 mgb2">
          <div class="fs-n">{{ item.author }}</div>
          <div>
            <i class="iconfont icon-liulanliang fs-n"></i>
            <span class="fs-n">{{ item.seecount }}</span>
            <i class="iconfont icon-qinziAPPtubiao- fs-n mgl2"></i>
            <span class="fs-n">{{ item.praisecount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    // 跳转详情页
    jumpDetail(item) {
      // console.log(item)
      if (item && item.id) {
        this.$router.push({name: 'newsDetail', params: {id: item.id}})
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.module-show-list
  flex-wrap wrap
  margin-top 30px
  .module-show-item
    width 100%
    // margin-right 1%
    margin-bottom 20px
    position relative
    overflow hidden
    // border 1px solid #eeeeee
    border-radius 4px
    &:hover
      .right-top
        display block
      > .image-lar
        .el-image
          transform scale(1.2)
      .pano-name
        p
          color var(--themeColor)
    .image-lar
      overflow hidden
      width 255px
      height 150px
      border-radius 4px
      .el-image
        width 100%
        height 100%
        transition all 0.5s
    .infomain-right
      width calc(100% - 255px)
      padding-left 20px
      .title
        justify-content space-between
        height 40px
        padding 10px 12px 15px 12px
        .pano-name
          width 90%
          font-size 16px
          font-family PingFang SC
          font-weight bold
          color #000000
        .pano-user
          width 30%
          font-size 14px
          font-family PingFang SC
          color #999999
      .summary
        margin-bottom 10px
        height 75px
        overflow-x hidden
        overflow-y auto
      .num-date
        justify-content space-between
</style>